<template>
	<view>
		<u-navbar :title="$t('转换')"></u-navbar>
		<view class="goodsList">
			<view class="list">
				<view class="goods">
					<image :src="goodsinfo.goods_data.image" mode="" ></image>
					<view class="info">
						<view class="tit" >{{goodsinfo.goods_data.title}}</view>
						<view class="bi" v-if="goodsinfo.status == 0" >
							{{ $t("一共可转换") }}：<text>{{exchange_integral*goods_num}}</text>{{ $t("糯米值") }}
						</view>
						<view class="num">
							<u-number-box :min="1" @change="valChange" v-model="goods_num" :max="xz_count"></u-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="rule">
			<u-read-more :toggle="true">
				<view class="rule_title">转换规则</view>
				<rich-text :nodes="rule"></rich-text>
			</u-read-more>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="btm">
			<view class="btmbox">
				<view class="n-flex-row n-align-center">
					{{ $t("共") }}{{goods_num}}{{ $t("件") }} | {{ $t("合计") }}：<text class="bi"><text class="num">{{exchange_integral*goods_num}}</text>{{ $t("糯米值") }}</text> <button @click="duihuan">{{ $t("立即转换") }}</button>
				</view>
			</view>
		</view>
		<u-modal v-model="show" @confirm="confirm" content="糯米值转换根据市场成本变化，一经转换无法撤销，请确认是否转换？" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '1',
				rule:'',
				data:'',
				show:false,
				goods_id:'',
				goodsinfo:{},
				exchange_integral:0,
				xz_count:0,
				goods_num:0,
				total:0,
				goodslist:[],
			}
		},
		onLoad(option) {
			this.goods_id = option.goods_id
			this.getRule()
			this.getData();
		},
		methods: {
			valChange(e) {
				this.goods_num = e.value;
			},
			duihuan(){
				this.show = true
			},
			success(){
				uni.navigateTo({
					url:'/pagesB/pages/cangku/successduihuan'
				})
			},
			getData() {
				uni.showLoading({
					title: "加载中"
				})
				this.goodsinfo = {};
				this.$http({
						url: "api/order/get_prize_record_goods",
						data: {
							status: 0,
							goods_id: this.goods_id,
						}
					}).then(res => {
						uni.hideLoading()
						if (res.data.code == 1) {
							this.goodsinfo = res.data.data.row;
							this.exchange_integral = res.data.data.row.exchange_integral*1;
							this.xz_count = res.data.data.row.number;
							this.goods_num = res.data.data.row.number;
						} else {
							this.$tip.tip(res.data.msg)
						}
					}).catch(err => {});
			},
			confirm(){
				let that = this;
				if(!that.goods_id || !that.goods_num){
					that.$tip.tip("参数错误")
					return;
				}
				that.$http({
					url: "api/order/prize_exchange",
					data: {
						goods_id: that.goods_id,
						goods_num: that.goods_num
					}
				}).then(res => {
					if (res.data.code == 1) {
						that.$tip.tip(res.data.msg)
						setTimeout(() => {
							var pages = getCurrentPages(); // 获取当前挂载的路由数组
							var prePage = pages[pages.length - 2] //获取 上一个页面
							uni.navigateBack({
								success() {
									prePage.$vm.updatedata() // 当返回成功的时候调用上一级页面的回调
							     }
							})
						},1000)
					} else {
						that.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			getRule(){
				this.$http({
					url: "api/common/get_agreement",
					data: {
						name: 'exchange_tisp'
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.rule = res.data.data.content
					} else {
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			}
		}
	}
</script>

<style>
	page {
		background-color: #F4F4FC;
	}
	.rule_title{ text-align: center; }
	.goodsList {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.goodsList .list {
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.goodsList .list .goods {
		display: flex;
	}

	.goodsList .list .goods image {
		width: 150rpx;
		height: 150rpx;
		flex-shrink: 0;
	}

	.goods .info {
		margin-left: 20rpx;
		width: 100%;
	}

	.goods .info .shengyu {
		color: #999;
		margin-top: 10rpx;
		font-size: 24rpx;
	}
	.goods .info .bi{
		color: #F87A01;
		margin-top: 10rpx;
	}
	.goods .info .bi text {
		font-size: 34rpx;
		margin-right: 10rpx;
		font-weight: bold;
	}
	.goods .info .num {
		margin-top: 10rpx;
	}
	.tip {
		padding-top: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tip .bi {
		color: #F87A01;
		margin-top: 10rpx;
	}

	.tip .bi text {
		font-size: 34rpx;
		margin-right: 10rpx;
		font-weight: bold;
	}

	.rule {
		padding: 20rpx;
		background-color: #fff;
		margin: 0 auto;
		box-sizing: border-box;
		width: 710rpx;
	}

	.rule .tit {
		color: #999;
		font-size: 24rpx;
	}

	.btm {
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.btmbox {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
		box-sizing: border-box;
	}

	/* .btmbox text{
		font-size: 36rpx;
		font-weight: bold;
	} */
	.btmbox button {
		background-color: #00E1DB;
		color: #fff;
		margin-left: 20rpx;
		width: 250rpx;
	}

	.btmbox .bi {
		color: #F87A01;
	}

	.btmbox .num {
		font-size: 36rpx;
		font-weight: bold;
	}

	.newagain {
		position: fixed;
		left: 0;
		bottom: 180rpx;
		color: #21616A;
		background-image: linear-gradient(#8DE7EC, #e6ffff);
		border: 1rpx solid #D1FBFE;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
		box-shadow: 0 10rpx 30rpx #BFD7DB;
	}

	.onebox {
		width: 600rpx;
		background-color: #fff;
	}

	.onebox .bg {
		background: url('https://img.50api.cn/dingdang/pf.png') no-repeat;
		background-size: 100%;
		height: 270rpx;
		padding-top: 60rpx;
		padding-left: 40rpx;
		box-sizing: border-box;
	}

	.onebox .bg .tit {
		color: #63A8A6;
		font-size: 50rpx;
		font-family: 'myfont';
	}

	.onebox .bg .num {
		font-family: 'myfont';
		font-size: 60rpx;
		color: #EF662D;
	}

	.onebox .text {
		padding: 20rpx 50rpx;
		box-sizing: border-box;
	}

	.onebox .text .tip1 {
		color: #999;
	}

	.onebox .text .btns {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0;
	}

	.onebox .text .btns view {
		padding: 25rpx 80rpx;
	}

	.onebox .text .btns .qu {
		background-color: #F2F2F2;
	}

	.onebox .text .btns .que {
		background-color: #6EDEDF;
	}
</style>
